<template>
  <div class="index">
    <!-- <van-nav-bar title="首页">
          <van-icon name="chat-o" slot="right" @click="goMsg" />
    </van-nav-bar>-->
    <van-search placeholder="搜点啥呢" v-model="searchWord" @search="onSearch" />
    <div class="return" @click="goIndex" >回到首页</div>
    <van-swipe>
      <van-swipe-item class="swipe-item" v-for="(image, index) in swipeImages" :key="index">
        <img v-lazy="image.image_url" />
      </van-swipe-item>
    </van-swipe>
    <div class="index-container"></div>
    <ul class="grid">
      <li v-for="item in menu" :key="item.cat_id">
        <div @click="toCategory(item.cat_id)">
          <img :src="item.image_url" />
          <h3>{{item.cat_name}}</h3>
        </div>
      </li>
    </ul>
    <!-- <ul class="hot">
          <li>
            <div>
              <h3>xxxxx</h3>
              <p>xxxxxxxxxxx</p>
            </div>

            <img src="../../assets/1.png" alt />
          </li>
          <li>
            <div>
              <div>
                <h3>xxxxx</h3>
                <p>xxxxxxxxxxx</p>
              </div>
              <img src="../../assets/1.png" alt />
            </div>
            <div>
              <div>
                <h3>xxxxx</h3>
                <p>xxxxxxxxxxx</p>
              </div>

              <img src="../../assets/1.png" alt />
            </div>
          </li>
    </ul>-->
    <section class="banner">
      <h3>今日推荐</h3>
      <router-link
        tag="div"
        :to="{name:'goods',query:{ goods_id: recommend.goods_id }}"
        class="banner-container"
      >
        <img :src="recommend.image_url" alt />
        <!-- <dl>
                  <dt>{{recommend.goods_name}}</dt>
                  <dd>{{recommend.goods_desc}}</dd>
                  <dd>{{recommend.goods_price}}</dd>
        </dl>-->
      </router-link>
      <ul class="banner-list">
        <li v-for="item in recommendList" :key="item.goods_id">
          <router-link :to="{name:'goods',query:{ goods_id: item.goods_id }}">
            <img :src="item.image_url" alt />
            <h4>{{item.goods_name}}</h4>
            <p>&yen;{{item.goods_price}}</p>
          </router-link>
        </li>
      </ul>
    </section>
    <section class="pro">
      <div class="pro-title">
        <h3>商品列表</h3>
        <span @click="goGoodsList">更多></span>
      </div>
      <ul class="pro-list">
        <li v-for="item in goodslist" :key="item.goods_id">
          <router-link :to="{name:'goods',query:{ goods_id: item.goods_id }}">
            <img :src="item.goods_cover" alt />
            <h4>{{item.goods_name}}</h4>
            <p>&yen;{{item.goods_price}}</p>
          </router-link>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
import Vue from "vue";
import url from "@/utils/api.js";
import HomeHeader from "./components/Header"; // 这样引入是局部组件  应该在下方声明使用
import {
  Swipe,
  SwipeItem,
  Lazyload,
  TabbarItem,
  NoticeBar,
  Search,
  Row,
  Col,
  Rate
} from "vant";

Vue.use(Lazyload, {});
import { mapState } from "vuex";

export default {
  components: {
    HomeHeader, // 声名使用局部组件
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [NoticeBar.name]: NoticeBar,
    [Search.name]: Search,
    [Row.name]: Row,
    [Col.name]: Col,
    [Rate.name]: Rate
  },
  data() {
    return {
      searchWord: "",
      swipeImages: [],
      menu: [],
      recommend: {},
      recommendList: [],
      goodslist: []
    };
  },
  mounted() {
    // let token = this.$route.query.token;
    // if (token) {
    //   console.log(token);
    //   localStorage.setItem("token", token);
    // }
    this.getShow();
  },
  methods: {
    getShow() {
      this.$axios({
        method: "get",
        url: url.show,
        params: {
          token: localStorage.getItem("token")
        }
      }).then(res => {
        console.log(res);
        this.swipeImages = res.banner;
        this.menu = res.menu;
        this.recommend = res.recommend[0].vertical;
        this.recommendList = res.recommend[0].horizontal;
        this.goodslist = res.goodslist;
      });
    },
    onSearch() {
      console.log(this.searchWord);
      this.$router.push({
        name: "search",
        query: { keyword: this.searchWord }
      });
    },
    toCategory(cat_id) {
      this.$emit("changeActiveBar", 1);
      this.$router.push({ name: "category", query: { cat_id: cat_id } });
    },
    goGoodsList() {
      this.$router.push({ path: "/goodslist" });
    },
    goMsg() {
      this.$router.push({ path: "/msglist" });
    },
    goIndex() {
      this.$router.push({ path: "/" });
    }
  }
};
</script>

<style lang="less" scoped>
// @import '../../assets/style/common.less';
// 优化写法  @符号代表src目录  但是样式引入样式 需要在@符号前面加个~
// @import '~@/assets/style/common.less';
//再次优化  配置好别名之后  可以简写为： 在main.js 里不用加~
@import "~style/common.less";

.van-icon-xingxing:before {
  content: "\e610";
  position: relative;
  top: 50%;
  // left: -2Px;
  transform: translateY(-20%);
}

// 1px border
.setTopLine(@c:@borderColor) {
  position: relative;
  &:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    border-top: 1px solid @c;
  }
  [data-dpr="1"] &:before {
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
  }
}

.return {
  position: fixed;
  right: 10px;
  bottom: 60px;
  background-color: @priColor;
  opacity: 0.9;
  color: #fff;
  .font-dpr(12px);
  width: 50px;
  line-height: 50px;
  border-radius: 50%;
  text-align: center;
}
.index {
  // background-color: @borderColor;
  background-color: @bgColor;

  /deep/ .van-search {
    width: 92%;
    margin: 0 auto;
    height: 0.8rem;
    border-radius: 0.4rem;
    padding: 0;
    margin: 10px;
    // border: 1px solid red;
    background-color: @bgColor;

    /deep/ .van-cell {
      background-color: transparent !important;
      padding: 4px;
    }

    /deep/ .van-icon {
      .font-dpr(22px);
    }
  }

  .grid {
    box-sizing: border-box;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
    background-color: @bgColor;
    height: 88px;
    margin: 0 auto;

    img {
      height: 48px;
      width: 48px;
      border-radius: 50%;
    }

    h3 {
      .font-dpr(12px);
      color: @fontColorP;
      font-weight: 400;
      line-height: 2;
    }
  }

  /deep/ .van-swipe {
    // border: 1px solid red;
    text-align: center;

    img {
      max-height: 4rem;
      width: auto;
    }
  }

  // 三块列表
  .hot {
    // border: 1px solid red;
    margin: 0 10px;
    display: flex;

    li {
      // border: 1px solid #f0f;
      text-align: center;

      h3 {
        .font-dpr(15px);
        color: @fontColorH3;
      }

      p {
        .font-dpr(12px);
        color: @fontColorP;
      }

      &:first-child {
        // border: 1px solid blue;
        background-color: @borderColor;
        border-radius: 6px;
        flex: 3;
        height: 5rem;

        img {
          max-width: 3.2rem;
          margin-bottom: 10px;
        }

        div {
          // border: 1px solid red;
          margin-top: 10px;
        }

        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
      }

      &:last-child {
        margin-left: 10px;
        flex: 2;
        // border: 1px solid blue;
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        > div {
          background-color: @borderColor;
          border-radius: 6px;
          // border: 1px solid #ff0;
          flex: 1;
          display: flex;
          align-items: center;
          width: 100%;

          div {
            margin-left: 10px;
          }

          img {
            max-width: 1.6rem;
          }

          &:first-child {
            margin-bottom: 10px;
          }
        }
      }
    }
  }

  // 每日推荐
  .banner {
    // border: 1px solid red;
    margin: 0 20px;

    h3 {
      .font-dpr(14px);
      color: @fontColorH3;
      line-height: 3;
      font-weight: 500;
    }

    .banner-container {
      // border: 1px solid blue;
      position: relative;
      width: 100%;
      height: 120px;
      margin-bottom: 20px;

      dl {
        position: absolute;
        margin-top: 20px;
        margin-left: 30px;

        dt {
          .font-dpr(16px);
          color: @fontColorH3;
        }

        dd {
          .font-dpr(12px);
          color: @fontColorP;

          &:last-child {
            color: @secColor;
          }
        }
      }

      img {
        position: absolute;
        // left:0;
        // top: 0;
        width: 100%;
        // border: 1px solid #f0f;
      }
    }

    .banner-list {
      // margin: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      li {
        background-color: #edf8fd;
        // border: 1px solid red;
        margin-left: 10px;
        text-align: center;
        border-radius: 6px;

        &:first-child {
          margin-left: 0;
        }

        img {
          max-width: 60%;
          margin: 10px 0;
        }

        h4 {
          .font-dpr(14px);
          color: @fontColorH3;
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box;
          /* autoprefixer: off */
          -webkit-box-orient: vertical;
          /* autoprefixer: on */
          -webkit-line-clamp: 1;
        }

        p {
          .font-dpr(12px);
          color: @secColor;
          line-height: 1;
          margin: 10px;
        }
      }
    }
  }

  .pro {
    margin: 0 20px;
    margin-bottom: 48px;

    .pro-title {
      display: flex;
      justify-content: space-between;
      align-items: center;

      h3 {
        .font-dpr(14px);
        color: @fontColorH3;
        line-height: 3;
        font-weight: 500;
      }

      span {
        .font-dpr(12px);
        color: @tipColor;
        line-height: 3;
        font-weight: 500;
      }
    }

    .pro-list {
      // margin: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;

      li {
        box-sizing: border-box;
        padding: 0 5px;
        flex-basis: 46%;
        background-color: @borderColor;
        // border: 1px solid red;
        text-align: center;
        margin-bottom: 20px;
        border-radius: 12px;

        img {
          max-width: 60%;
          margin: 30px 0;
        }

        h4 {
          .font-dpr(14px);
          color: @fontColorH3;
          line-height: 1.5;
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box;
          /* autoprefixer: off */
          -webkit-box-orient: vertical;
          /* autoprefixer: on */
          -webkit-line-clamp: 1;
        }

        p {
          .font-dpr(12px);
          color: @secColor;
          line-height: 1;
          margin: 10px;
        }
      }
    }
  }
}

.van-tabbar {
  height: 48px;
  // transform: translateY(-50%);
  &-item {
    color: @fontColorH3 !important;

    &--active {
      color: @priColor !important;
    }

    &__icon {
      .font-dpr(16px) !important;
    }

    &__text {
      .font-dpr(12px) !important;
    }
  }
}

/deep/ .van-nav-bar .van-icon {
  .font-dpr(28px) !important;
  color: @fontColorP !important;
}

.product-title {
  .textoverflow(1);
}
</style>
